<template>
  <div class="app-container">
    <!-- 第一排搜索卡片 -->
    <el-card class="box-card">
      <el-row style="font-size: 15px; line-height: 2em; color: #909399" :gutter="60">
        <el-col :span="6">
          <a>
            <img src="../static/主页/5.jpg" width="300px" height="180px" />
          </a>
        </el-col>
        <el-col :span="18">
          <el-form :model="itemFindByPage">
            <el-col :span="12">
              <div class="search">
                角色名称：<el-input v-model="roleCondition.roleName" placeholder="角色名称"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                模块：<el-input v-model="roleCondition.module" placeholder="模块"></el-input>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="search">
                <el-button type="primary" icon="el-icon-search" @click="getItemListBySearch">搜索</el-button>
                <el-button type="primary" icon="el-icon-search" @click="addRole">新增角色</el-button>
              </div>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 第二排展示 -->
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
        <el-table-column label="角色名称">
          <template slot-scope="scope">
            <span>{{ scope.row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色描述">
          <template slot-scope="scope">
            <span>{{ scope.row.roleDescription }}</span>
          </template>
        </el-table-column>
        <el-table-column label="模块权限">
          <template slot-scope="scope">
            <span v-for="perm in scope.row.permList" :key="perm.index">
              {{ perm.permName }}/</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.roleStatus == '1' ? "正常" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>


      </el-table>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="roleTable">
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-input v-model="roleTable.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" :label-width="formLabelWidth">
            <el-input v-model="roleTable.roleDescription" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="模块权限" :label-width="formLabelWidth">
            <span v-for="(perm, index) in permList" :key="perm.key">
              <el-checkbox v-model="checked[index]">{{perm.permName}}{{"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0"}}</el-checkbox>
            </span>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch
              style="display: block; margin-top: 8px"
              v-model="roleTable.roleStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正常"
              inactive-text="禁用"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
            <el-button v-if="title === '修改角色'" type="primary" @click="update">修 改</el-button>
            <el-button v-if="title === '新增角色'" type="primary" @click="add">新 增</el-button>
        </div>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
  import {getRole} from '@/api/role'
  import {deleteRole} from '@/api/role'
  import {getPerm} from '@/api/role'
  import {updateRole} from '@/api/role'
  import {addRole} from '@/api/role'
  import { Message } from 'element-ui'

  export default {
    data() {
      return {
        roleCondition: {
          roleName: '',
          module: ''
        },
        tableData: [],
        roleTable: {},
        permList: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        checked: [],
        title: ''
      }

    },
    created() {
      /* 获取角色列表 */
      this.getRoleList(this.roleCondition);
    },
    methods: {
      getRoleList(data){
        getRole(data).then((res) => {
          this.tableData = res.data;
        }).catch((err) => {
          
        });
      },
      //删除角色
      handleDelete(row){
        deleteRole(row.roleId).then((res) => {
          this.getRoleList(this.roleCondition);
          Message({
            message: res.message,
            type: 'success',
            duration: 3 * 1000
          });
        }).catch((err) => {
          
        });
      },  
      //编辑角色
      handleEdit(row){
        //弹出框标题为修改
        this.title = "修改角色";
        //显示弹出框
        this.dialogFormVisible = true;
        //将该行数据传递到弹出框内
        this.roleTable = row;
        //获取所有权限
        this.getPerm();
        //清空多选框选中状态
        for (const index in this.permList) {
          this.checked[index] = false;
        }
        //根据传入的对象的权限列表id将对应的多选框设为选中状态
        for (let perm of row.permList) {
          this.checked[perm.permId - 1] = true;
        }
      },
      //新增角色
      addRole(){
        //弹出框标题为新增
        this.title = "新增角色";
        //显示弹出框
        this.dialogFormVisible = true;
        //获取所有权限
        this.getPerm();
      },
      //请求所有权限
      getPerm(){
        getPerm().then((res) => {
          this.permList = res.data
        }).catch((err) => {
          
        });
      },
      //编辑确定
      update(){
        //清空角色权限集合
        this.roleTable.permList = [];
        //遍历加入角色权限
        for (let i = 0; i < this.permList.length; i++) {
          if(this.checked[i]){
            this.roleTable.permList.push(this.permList[i]);
          }
        }
        //调用更新方法
        updateRole(this.roleTable).then((res) => {
          this.dialogFormVisible = false;
          this.getRoleList(this.roleCondition);
        }).catch((err) => {
          
        });
      },
      //新增确定
      add(){
        //清空角色权限集合
        this.roleTable.permList = [];
        //遍历加入角色权限
        for (let i = 0; i < this.permList.length; i++) {
          if(this.checked[i]){
            this.roleTable.permList.push(this.permList[i]);
          }
        }
        //调用新增方法
        addRole(this.roleTable).then((res) => {
          this.dialogFormVisible = false;
          this.getRoleList(this.roleCondition);
        }).catch((err) => {
          
        });
      },
      //取消
      cancel(){
        this.roleTable = [];
        for (const index in this.permList) {
          this.checked[index] = false;
        }
        this.dialogFormVisible = false;
      }
    }
  }

</script>



<style scoped>
  .el-input {
    width: 250px;
  }

  .box-item {
    width: 75%;
    float: right;
  }

  .field-label {
    vertical-align: middle;
  }

  .box-card {
    width: 98%;
    max-width: 100%;
    margin: 20px auto;
  }

  .search {
    margin-top: 10px;
    width: 100%;
    display: flex;
    font-size: 15px;
    line-height: 50px;
  }

</style>
